<template>
  <div id="builder"></div>
</template>

<script lang="ts">
import 'bootstrap-icons/font/bootstrap-icons.css'
import { Formio, FormBuilder,Templates } from 'formiojs';
import 'formiojs/dist/formio.full.min.css'
import Skrform from "@/components/skrform";
import SelectTree from "@/components/selecttree";
import t from '@/translations'
Formio.use(Skrform)
Formio.use(SelectTree)
export default {
  name: "FormBuilder",
  mounted() {
    console.log("FormBuilder",Skrform.components.SkrForm.editForm())

    let schema = window.localStorage.getItem('json-schema');
    new FormBuilder(document.getElementById("builder"), schema ? JSON.parse(schema) : {}, {
      showFullJsonSchema: true,
    }).build().then((instance) => {
      instance.i18next.t = t
      const onBuild = function () {
        window.localStorage.setItem("json-schema",JSON.stringify(instance.schema, null, 4))
      };

      const onReady = function () {
        instance.on('change', onBuild);
      };

      instance.ready.then(onReady);
    });

  }
}
</script>

<style scoped>
#builder {
  margin: 20px;
}
</style>
